<template>
  <div class="banner w">
    <el-skeleton animated v-if="bannerList.length === 0">
      <template slot="template">
        <el-skeleton-item variant="image" style="height: 400px" />
      </template>
    </el-skeleton>
    <el-carousel :interval="4000" autoplay v-else>
      <el-carousel-item v-for="(item, index) in bannerList" :key="index">
        <el-image :src="item.imageUrl">
          <div slot="error" class="imageError">
            <!-- <img src="https://z3.ax1x.com/2021/11/19/Ib4IVs.png" /> -->
            <img :src="$constant.ImgError" />
          </div>
          <div slot="placeholder">
            <h2>正在加载</h2>
            <!-- <img src="https://z3.ax1x.com/2021/11/16/IRL9rq.png" /> -->
            <img :src="$constant.ImgNowLoading" />
          </div>
        </el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { getBannerPc } from "../../../../../api/homeApi";
export default {
  name: "banner",
  components: {},
  data() {
    return {
      bannerList: [],
    };
  },
  created() {
    // 获取  banner
    this.getBanner();
  },
  methods: {
    async getBanner() {
      try {
        const result = await getBannerPc();
        if (result.code === 200) {
          // console.log("接口调用成功", result);
          this.bannerList = result.banners;
        }
      } catch (error) {}
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.banner {
  // 覆盖样式
  /deep/ .el-carousel__arrow {
    background-color: @globalColor;
  }
  /deep/ .is-active button {
    background-color: @globalColor;
  }
  /deep/ .el-carousel__button {
    background-color: #d5d5d5;
    opacity: 1;
    height: 4px;
  }
  /deep/ .el-carousel__container {
    height: 400px;
  }
  /deep/ .el-carousel-item {
    width: 100%;
    height: 100%;
  }
  /deep/ .el-image {
    width: 100%;
    height: 100%;
  }

  margin: 40px auto;
  height: 400px;
  .imageError {
    img {
      width: 100vw;
      height: 400px;
    }
  }
}
</style>
